import { JsonInputDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.JsonInput);

## Usage

`JsonInput` is based on [Textarea](/core/textarea/) component,
it includes json validation logic and option to format input value on blur:

<Demo data={JsonInputDemos.usage} />

## Controlled

```tsx
import { useState } from "react";
import { JsonInput } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState("");
  return <JsonInput value={value} onChange={setValue} />;
}
```

## Input props

<InputFeatures component="JsonInput" element="textarea" />

<Demo data={JsonInputDemos.configurator} />

## Disabled state

<Demo data={JsonInputDemos.disabled} />

<StylesApiSelectors component="JsonInput" />

<Demo data={JsonInputDemos.stylesApi} />

<GetElementRef component="JsonInput" refType="textarea" />

<InputAccessibility component="JsonInput" />
